<template>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    viewBox="0 0 100 100"
    preserveAspectRatio="xMidYMid"
  >
    <rect x="17" y="29.5" width="16" height="41" fill="#0b60b3">
      <animate
        attributeName="y"
        repeatCount="indefinite"
        dur="1.25s"
        calcMode="spline"
        keyTimes="0;0.5;1"
        values="15.149999999999999;29.5;29.5"
        keySplines="0 0.5 0.5 1;0 0.5 0.5 1"
        begin="-0.25s"
      />
      <animate
        attributeName="height"
        repeatCount="indefinite"
        dur="1.25s"
        calcMode="spline"
        keyTimes="0;0.5;1"
        values="69.7;41;41"
        keySplines="0 0.5 0.5 1;0 0.5 0.5 1"
        begin="-0.25s"
      />
    </rect>
    <rect x="42" y="29.5" width="16" height="41" fill="#1089ff">
      <animate
        attributeName="y"
        repeatCount="indefinite"
        dur="1.25s"
        calcMode="spline"
        keyTimes="0;0.5;1"
        values="18.737499999999997;29.5;29.5"
        keySplines="0 0.5 0.5 1;0 0.5 0.5 1"
        begin="-0.125s"
      />
      <animate
        attributeName="height"
        repeatCount="indefinite"
        dur="1.25s"
        calcMode="spline"
        keyTimes="0;0.5;1"
        values="62.525000000000006;41;41"
        keySplines="0 0.5 0.5 1;0 0.5 0.5 1"
        begin="-0.125s"
      />
    </rect>
    <rect x="67" y="29.5" width="16" height="41" fill="#70b8ff">
      <animate
        attributeName="y"
        repeatCount="indefinite"
        dur="1.25s"
        calcMode="spline"
        keyTimes="0;0.5;1"
        values="18.737499999999997;29.5;29.5"
        keySplines="0 0.5 0.5 1;0 0.5 0.5 1"
      />
      <animate
        attributeName="height"
        repeatCount="indefinite"
        dur="1.25s"
        calcMode="spline"
        keyTimes="0;0.5;1"
        values="62.525000000000006;41;41"
        keySplines="0 0.5 0.5 1;0 0.5 0.5 1"
      />
    </rect>
  </svg>
</template>

<script>
export default {
  name: "loading02"
}
</script>
